<template>
  <view class="goods-item" @tap="toDetail">
    <cl-image mode="aspectFill" background-color="#fff" :size="[350, '100%']" :radius="[16, 16, 0, 0]"
      :src="resizeImage(item.mainPic!, 360)" />

    <view class="goods-item__det">
      <cl-text :value="item.title" block :margin="[0, 0, 16, 0]" :ellipsis="2" :line-height="1.4" />

      <cl-row>
        <cl-text v-show="item.isShowPrice" type="price" color="#333" :size="34" :value="item.price" bold />
        <cl-text color="info" :size="22" :margin="[0, 0, 0, 10]" :value="`${item.sold || 0}件已售`" />
      </cl-row>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import type { PropType } from "vue";
  import { useCool, useUpload } from "/@/cool";

  const props = defineProps({
    item: {
      type: Object as PropType<Eps.GoodsInfoEntity>,
      default: () => ({}),
    },
  });

  const { router } = useCool();
  const { resizeImage } = useUpload();

  function toDetail() {
    router.push({
      path: "/pages/goods/detail",
      query: {
        id: props.item.id,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .goods-item {
    position: relative;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;

    .goods-item__det {
      padding: 20rpx;
    }
  }
</style>